<template>
	<div class='toc_IM_tabBar_frame'>
		<div class='toc_IM_container_frame'>
			<router-view></router-view>		
		</div>
		<div class='toc_IM_bottom'>
			<a class='tabbar_item' 
				v-for="(item,index) in tabBarList"
				v-on:click="tabBarController(index,item.link)"
				v-bind:class="{'tabbar_item_on':item.isactive}">
				<span>
					<img v-if='!item.isactive' v-bind:src="item.ico" alt="" class="tabbar_item_icon">
					<img v-if='item.isactive' v-bind:src="item.icoh" alt="" class="tabbar_item_icon">
				</span>
				<p class="tabbar_item_label">{{item.title}}</p>
			</a>
		</div>
	</div>
</template>

<script>
	export default {
	  	name: 'tabBar',
	  	components:{},
	  	data(){
	    	return {
		    	tabBarList:[
				    {
				    	title:'消息',
				    	link:'/messageList',
				    	ico:require('@/assets/img/tabBar_ico/t1.png'),
				    	icoh:require('@/assets/img/tabBar_ico/t1h.png'),
				    	isactive:true
				    },
				    {
				    	title:'联系人',
				    	link:'/contacts',
				    	ico:require('@/assets/img/tabBar_ico/t2.png'),
				    	icoh:require('@/assets/img/tabBar_ico/t2h.png'),
				    	isactive:false
				    },{
				    	title:'我的',
				    	link:'/my',
				    	ico:require('@/assets/img/tabBar_ico/t3.png'),
				    	icoh:require('@/assets/img/tabBar_ico/t3h.png'),
				    	isactive:false
				    }
				]
	    	}
	  	},
	  	methods:{
	  		tabBarController(index,link,name){
	  			var _self = this;
				this.tabBarList.forEach(function(item,eq){
					if(eq==index || item.link==name){
						item.isactive=true
						_self.$router.push({path: link});
					}else{
						item.isactive=false;
					};
				});	
			}
	  	}
	}
</script>

<style>
</style>